<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 页面 meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>美年健康</title>
    <meta name="description" content="美年健康">
    <meta name="keywords" content="美年健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/orderset.css">
</head>

<body class="hold-transition">
<div id="app">
    <!-- 导航设置 -->
    <div class="content-header">
        <h1>预约管理<small>预约设置</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>预约管理</el-breadcrumb-item>
            <el-breadcrumb-item>预约设置</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="box ordersetting">
                <!-- 上传、下载 -->
                <el-card class="box-card">
                    <div class="boxMain">
                        <el-button style="margin-bottom: 20px;margin-right: 20px" type="primary"
                                   @click="downloadTemplate()">模板下载
                        </el-button>
                        <el-upload action="/transfer.do"
                                   name="file"
                                   accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                   :show-file-list="false"
                                   :on-success="handleSuccess"
                                   :before-upload="beforeUpload">
                            <el-button type="primary">上传文件</el-button>
                        </el-upload>
                    </div>
                    <div>
                        操作说明：请点击"模板下载"按钮获取模板文件，在模板文件中录入预约设置数据后点击"上传文件"按钮上传模板文件。
                    </div>
                </el-card>
                <div class="calendar">
                    <!-- 年份 月份 -->
                    <div class="month">
                        <div class="currentdate">
                            <span class="choose-year">{{ currentYear }}年</span>
                            <span class="choose-month">{{ currentMonth }}月</span>
                        </div>
                        <div class="choose">
                            <span @click="goCurrentMonth(currentYear,currentMonth)" class="gotoday">今天</span>
                            <span @click="pickPre(currentYear,currentMonth)">❮</span>
                            <span @click="pickNext(currentYear,currentMonth)">❯</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <!-- 星期 -->
                    <div class="caldate">
                        <ul class="weekdays">
                            <li>周一</li>
                            <li>周二</li>
                            <li>周三</li>
                            <li>周四</li>
                            <li>周五</li>
                            <li>周六</li>
                            <li>周日</li>
                        </ul>
                        <!-- 日期 -->
                        <ul class="days">
                            <!-- v-for循环 每一次循环用 <li> 标签创建一天 -->
                            <li v-for="dayobject in days">
                                <template>
                                    <!-- 非当前月份 -->
                                    <div class="other-month" v-if="dayobject.day.getMonth()+1 != currentMonth">
                                        {{ dayobject.day.getDate() }}
                                    </div>
                                    <!-- 当前月 -->
                                    <div class="everyday" v-if="dayobject.day.getMonth()+1 == currentMonth">
                                        <span class="datenumber">{{ dayobject.day.getDate()}}</span>

                                        <template>
                                            <template v-for="obj in leftobj">
                                                <template v-if="obj.date == dayobject.day.getDate()">
                                                    <template v-if="obj.number > obj.reservations">
                                                        <div class="usual">
                                                            <p>可预约{{obj.number}}人</p>
                                                            <p>已预约{{obj.reservations}}人</p>
                                                        </div>
                                                    </template>
                                                    <template v-else>
                                                        <div class="fulled">
                                                            <p>可预约{{obj.number}}人</p>
                                                            <p>已预约{{obj.reservations}}人</p>
                                                            <p>已满</p>
                                                        </div>
                                                    </template>
                                                </template>
                                            </template>
                                            <button v-if="dayobject.day > today" @click="handleOrderSet(dayobject.day)"
                                                    class="orderbtn">设置
                                            </button>
                                        </template>

                                    </div>
                                </template>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            // 当前日期
            today: new Date(),
            currentDay: 1,
            currentMonth: 1,
            LocalMonth: 1,
            currentYear: 1970,
            currentWeek: 1,
            days: [],
            // 用于装载页面显示的月份已经进行预约设置的数据
            leftobj: [],
            // 与服务器约定的响应码
            SUCCESS: 0,
            INFO: 1,
            WARNING: 2,
            ERROR: 3
        },
        created: function () {
            this.initData(null);
        },
        methods: {
            // 通知提示框
            showNotice(code, msg) {
                if (this.SUCCESS == code) {
                    this.$notify.success({
                        title: '成功',
                        message: msg,
                    });
                } else if (this.INFO == code) {
                    this.$notify.info({
                        title: '提示',
                        message: msg,
                    });
                } else if (this.WARNING == code) {
                    this.$notify.warning({
                        title: '警告',
                        message: msg,
                    });
                } else if (this.ERROR == code) {
                    this.$notify.error({
                        title: '失败',
                        message: msg,
                    });
                }
            },

            // 预约设置
            handleOrderSet(selectedDate) {
                var dateStr = this.parseDate(selectedDate);
                // 从服务器获取当前选中日期的可预约人数
                axios({
                    method: "get",
                    url: "/orderSetting/" + dateStr + ".do",
                }).then(response => {
                    if (this.SUCCESS == response.data.code) {
                        var number = response.data.resultMap.item.number;
                        // 当前日期下存在预约设置数据，可进行已预约人数的设置
                        this.$prompt('请输入已预约人数', dateStr + '【' + number + '】', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            inputPattern: /^[0-9]+.?[0-9]*/,
                            inputErrorMessage: '请输入正确的已预约人数'
                        }).then(({value}) => {
                            if (number != -1 && value > number) {
                                this.$message({
                                    message: '已预约人数应小于可预约人数，请重新输入',
                                    type: 'warning'
                                });
                                return false;
                            }
                            // 设置已预约人数
                            axios({
                                method: "post",
                                url: "/orderSetting.do",
                                data: this.checkitemIds,
                                params: {
                                    "_method": "put",
                                    "dateStr": dateStr,
                                    "reservations": value
                                }
                            }).then(response => {
                                this.showNotice(response.data.code, response.data.msg);
                            }).finally(() => {
                                this.initData(dateStr);
                            });
                        }).catch(() => {
                        });
                    } else {
                        this.showNotice(response.data.code, response.data.msg);
                    }
                });
            },

            // 上传之前进行文件格式校验
            beforeUpload(file) {
                const isXLS = file.type === 'application/vnd.ms-excel';
                const isXLSX = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
                if (isXLS || isXLSX) {
                    return true;
                }
                this.$message.error('上传文件只能是 xls 或者 xlsx 格式！');
                return false;
            },

            // 下载模板文件
            downloadTemplate() {
                window.location.href = "/transfer.do?filename=orderSetting_template.xlsx";
            },

            // 上传成功提示
            handleSuccess(response, file) {
                this.showNotice(response.code, response.msg);
            },

            // 初始化当前页要展示的日期
            initData: function (cur) {
                var date;
                var index = 0;   // 控制显示预定的天数
                if (cur) {
                    date = new Date(cur);
                } else {
                    var now = new Date();
                    var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1));
                    d.setDate(35);
                    date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
                }
                this.currentDay = date.getDate();
                this.currentYear = date.getFullYear();
                this.currentMonth = date.getMonth() + 1;
                this.currentWeek = date.getDay(); // // 本月第一天是周几（周日0 周六 6）
                var today = new Date();
                this.LocalMonth = today.getMonth() + 1;
                if (this.currentWeek == 0) {
                    this.currentWeek = 7;
                }
                var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
                this.days.length = 0;
                // 今天是周日，放在第一行第 7 个位置，前面 6 个
                // 初始化本周
                for (var i = this.currentWeek - 1; i >= 0; i--) {
                    var d = new Date(str);
                    d.setDate(d.getDate() - i);
                    var dayobject = {};
                    dayobject.day = d;
                    var now = new Date();
                    if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                        dayobject.index = index++;// 从今天开始显示供预定的数量
                    } else if (index != 0 && index < 3)
                        dayobject.index = index++;// 从今天开始3天内显示供预定的数量
                    this.days.push(dayobject);// 将日期放入data 中的days数组 供页面渲染使用
                }
                // 其他周
                for (var i = 1; i <= 35 - this.currentWeek; i++) {
                    var d = new Date(str);
                    d.setDate(d.getDate() + i);
                    var dayobject = {};// dayobject   {day:date,index:2}
                    dayobject.day = d;
                    var now = new Date();
                    if (d.getDate() === (now.getDate()) && d.getMonth() === now.getMonth() && d.getFullYear() === now.getFullYear()) {
                        dayobject.index = index++;
                    } else if (index != 0 && index < 3)
                        dayobject.index = index++;
                    this.days.push(dayobject);
                }

                this.leftobj = [
                    // {date: 1, number: 120, reservations: 1},
                ];
                // 从服务器获取指定年、指定月的预约数据
                var dateStr = this.formatDate(this.currentYear, this.currentMonth, this.currentDay);
                axios({
                    url: "/orderSetting.do",
                    method: "get",
                    params: {
                        "dateStr": dateStr
                    }
                }).then(response => {
                    if (this.SUCCESS == response.data.code) {
                        var orderSettingList = response.data.resultMap.list;
                        this.leftobj = [];
                        var tempDate;
                        for (var i in orderSettingList) {
                            // 将后台传来的 Date 数据转化为 js 的 Date 类型
                            tempDate = new Date(orderSettingList[i].orderDate);
                            this.leftobj[i] = {};
                            this.leftobj[i].date = tempDate.getDate();
                            this.leftobj[i].number = orderSettingList[i].number;
                            this.leftobj[i].reservations = orderSettingList[i].reservations;
                        }
                    } else {
                        this.showNotice(response.data.code, response.data.msg);
                    }
                });
            },
            // 切换到当前月份
            goCurrentMonth: function (year, month) {
                var d = new Date();
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            },
            // 向前一个月
            pickPre: function (year, month) {
                // setDate(0); 上月最后一天
                // setDate(-1); 上月倒数第二天
                // setDate(dx) 参数dx为 上月最后一天的前后dx天
                var d = new Date(this.formatDate(year, month, 1));
                d.setDate(0);
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            },
            // 向后一个月
            pickNext: function (year, month) {
                var d = new Date(this.formatDate(year, month, 1));
                d.setDate(35);// 获取指定天之后的日期
                this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
            },
            // 返回 类似 2016-01-02 格式的字符串
            formatDate: function (year, month, day) {
                var y = year;
                var m = month;
                if (m < 10) m = "0" + m;
                var d = day;
                if (d < 10) d = "0" + d;
                return y + "-" + m + "-" + d
            },
            // Parse the JavaScript date like this '2022-07-02' format
            parseDate: function (date) {
                var nowMonth = date.getMonth() + 1;
                var strDate = date.getDate();
                var separator = "-";
                if (nowMonth >= 1 && nowMonth <= 9) {
                    nowMonth = "0" + nowMonth;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                return date.getFullYear() + separator + nowMonth + separator + strDate;
            }
        }
    })
</script>
</html>